<template>
	<div>
		<div class="chain-link-bar-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item to="/">数据统计</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-card class="box-card">
			
			<div slot="header" class="clearfix">
			  <h3 class="app-h3 app-margin-v-0">
			    即时通赠送次数
			  </h3>
			</div>
			
			<el-form style="text-align: center;" :inline="true" :model="formInline" class="demo-form-inline">
				
				<div style="margin: 5%;">
				  <h2 class="app-h3 app-margin-v-0">
				    送出即时通总数：【{{pushNum}}】
				  </h2>
				</div>
				
				<el-form-item label="电话号码："><el-input v-model="formInline.phone" placeholder="赠送电话"></el-input></el-form-item>
				<el-form-item label="赠送次数(最多15次)：">
					<el-input-number v-model="formInline.num" @change="handleChange" :min="1" :max="15" label="赠送次数"></el-input-number>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="giveJst">赠送</el-button></el-form-item>
			</el-form>
			<div style="height: 100px;"></div>
		</el-card>
	</div>
</template>
<script>
	
	import Api from '../../api/Api';
	import ActivityApi from '../../api/ActivityApi';
	
export default {
	data() {
		return {
			formInline: {
				phone: '',
				num: 10
			},
			pushNum: ''
		};
	},
	mounted() {
		this.getPushNum();
	},
	methods: {
		handleChange(value) {
			console.log(value);
		},
		giveJst() {
			if(this.formInline.phone.length != 11){
				this.$notify.error({
				  title: '手机号错误！',
				  message: '请输入正确的手机号！！'
				});
				return;
			}
			ActivityApi.jst(this.formInline, json => {
				this.notifySuccess();
			});
		},
		getPushNum() {
			ActivityApi.getPushNum(this.formInline, json => {
				this.pushNum = json.status_msg;
			});
		},
		notifySuccess(){
			this.$notify({
			  title: '添加成功',
			  message: '成功为 ' + this.formInline.phone + '用户赠送' + this.formInline.num + '次即时通次数！',
			  type: 'success'
			});
			this.pushNum = Number(this.pushNum) + this.formInline.num;
			this.formInline.phone = "";
		}
	}
};
</script>
<style></style>
